<!DOCTYPE html>
<html>
<head>
    <title>挂号--中软高科-2015</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script type="text/javascript" src="../Js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="../Js/webUtil.js"></script>
 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    <script type="text/javascript">
    $(function () {
        let url = document.location.toString();
        let index = url.GetValue("index");
        if (index ==null){
            index =1;
        }
		$('#backid').click(function(){
				window.location.href="index.html?index="+index;
		 });
    });
    </script>
</head>
<body>
<form id="regForm" class="definewidth m20">
<table class="table table-bordered table-hover definewidth m10">
    <input name="id" id="id" type="hidden"/>
    <tr>
        <td width="10%" class="tableleft">姓名</td>
        <td><input type="text" name="name" id="name" value=""/></td>
    </tr>

    <tr>
        <td width="10%" class="tableleft">身份证号</td>
        <td><input type="text" name="idCard" id="idCard" value=""/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">挂号费</td>
        <td><input type="text" name="regPrice" id="regPrice" value="5"/>元</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">社保号</td>
        <td><input type="text" name="medical" id="medical" value="453253453"/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">联系电话</td>
        <td><input type="text" name="phone" id="phone" value="13543235678"/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">是否自费</td>
        <td><input type="radio" name="selfPrice" value="0"/>否&nbsp;&nbsp;&nbsp;
            <input type="radio" name="selfPrice" value="1"/>是</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">性别</td>
        <td><input type="radio" name="sex" value="1" />男&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="0"/>女</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">年龄</td>
        <td><input type="text" name="age" id="age" value="33"/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">职业</td>
        <td><input type="text" name="work" id="work" value="狗仔队"/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">初复诊</td>
        <td><input type="radio" name="lookDoctor" value="0" />初诊&nbsp;&nbsp;&nbsp;
            <input type="radio" name="lookDoctor" value="1"/>复诊</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">所挂科室</td>
        <td id="departmentChoice" ></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">指定医生</td>
        <td><select id="doctorChoice" name="doctorId"></select></td>
    </tr>
	<tr>
        <td width="10%" class="tableleft">备注</td>
        <td><textarea id="illness"></textarea></td>
	</tr>
    <tr>
        <td colspan="2">
			<center>
				<button id="update" class="btn btn-primary" type="button">保存</button> &nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
			</center>
		</td>
    </tr>
</table>
</form>
</body>
<script>
    $(function () {
        loadDepartment();
        loadData();

        $("#update").click(function(){
           update();
        });
    });

    function update() {
        let url = document.location.toString();
        let index = url.GetValue("index") == null? 1:url.GetValue("index");
        $.ajax({
            type:"POST",
            url:"/register",
            data:$("#regForm").serialize()+"&_method=PUT",
            dataType:"json",
            success: function(vo){
                alert(vo.msg);
                window.location.href="index.html?index="+index;
            }
        });
    }
    function loadDoctor(departmentId) {
        if (departmentId==null){
            departmentId =1;
        }
        $.ajax({
            type: "GET",
            url: "/doctors/department/" + departmentId,
            data: "",
            dataType: "json",
            success: function (vo) {
                let str = '';
                $("#doctorChoice").html(str);
                if (vo.code == 200) {
                    let list = vo.list;
                    for (let i = 0; i < list.length; i++) {
                        str += '<option value="' + list[i].id + '">' + list[i].name + '</option>';
                    }
                    $("#doctorChoice").html(str);
                    $("#doctorChoice").show();
                } else {
                    alert(vo.msg);
                }
            }
        });
    }
    function loadDepartment() {
        $("#doctorChoice").hide();
        $.ajax({
            type: "GET",
            url: "/department/list",
            data: "",
            dataType: "json",
            success: function (vo) {
                if (vo.code == 200) {
                    let str = '<select onchange="loadDoctor(this.options[this.options.selectedIndex].value)" name="departmentId">';
                    $("#departmentChoice").html(str);
                    let list = vo.list;
                    for (let i = 0; i < list.length; i++) {
                        let obj = list[i];
                        str += '<option value="' + obj.id + '">' + obj.name+'</option>';
                    }
                    str += '</select>';
                    $("#departmentChoice").html(str);
                } else {
                    alert(vo.msg);
                }
            }
        });
        loadDoctor();
    }
    function loadData(){
        let url = document.location.toString();
        let id = url.GetValue("id");
        $.ajax({
           type:"GET",
            url:"/register/"+id,
            data:"",
            dataType:"json",
            success: function(vo){
                if (vo.code==200){
                    let obj = vo.obj;
                    $("#id").val(obj.id);
                    $("#name").val(obj.name);
                    $("#idCard").val(obj.idCard);
                    $("#regPrice").val(obj.regPrice);
                    $("#medical").val(obj.medical);
                    $("#phone").val(obj.phone);
                    $("input[name = 'selfPrice']").each(function () {
                        if ($(this).val()==obj.selfPrice){
                            $(this).prop("checked",true);
                        }
                    });
                    $("input[name = 'sex']").each(function () {
                        if ($(this).val()==obj.sex){
                            $(this).prop("checked",true);
                        }
                    });
                    $("#age").val(obj.age);
                    $("#work").val(obj.work);

                    $("input[name = 'lookDoctor']").each(function () {
                        if ($(this).val()==obj.lookDoctor){
                            $(this).prop("checked",true);
                        }
                    });

                    $("#departmentName").val(obj.doctor.department.id);
                    $("#doctorName").val(obj.doctor.id);
                    $("#illness").val(obj.hospitalization.illness);
                }else {
                    alert(vo.msg);
                }
            }
        });
    }
</script>

</html>